<script setup lang="ts">
import { onMounted, ref } from 'vue'

import PersonCard from './DachuangProjectDetailsTeamPersonCard.vue';
import type { ProjectTeamProps } from '../types/ProjectTeamProps';
import { getIcon } from "@/api/assets/assets";

// Define props
const props = defineProps<{ card: ProjectTeamProps, }>();
const defaultAvatar = ref<string>("")
const defaultImg = ref<string>("")

const fetchIcon = async () => {
  try {
    const data = await getIcon(['333.png', '164.png'])
    defaultAvatar.value = data['333.png']
    defaultImg.value = data['164.png']
  }
  catch (error) {
    console.error('API 调用错误:', error)
  }
}
onMounted(() => {
  fetchIcon()
})
const { teachers, members } = props.card;
const aaaa = defaultAvatar
const bbbb = defaultImg
</script>

<template>
  <div>
    <div>
      <h2 style="font-size: 1.5rem; font-weight: bold;">
        指导老师
      </h2>
      <a-row :gutter="[20, 20]">
        <a-col v-for="(teacher, index) in teachers" :key="index" :span="6">
          <PersonCard
            :avatar="aaaa"
            :name="teacher.userName"
            :role="teacher.userType"
            :department="teacher.userCollege"
            :img="bbbb"
          />
        </a-col>
      </a-row>
    </div>

    <div>
      <h2 style="font-size: 1.5rem; font-weight: bold;">
        核心成员
      </h2>
      <a-row :gutter="[16, 16]">
        <a-col v-for="(member, index) in members" :key="index" :span="6">
          <PersonCard
            :avatar="aaaa"
            :name="member.userName"
            :role="member.userType"
            :department="`${member.userGrade} ${member.userCollege}`"
            :img="bbbb"
          />
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<style lang="scss">
.cardWrapper {
  line-height: 1.75em;
  color: rgba(51, 51, 51, 1);
  font-size: 1.25em;
}

.imgWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
